<template>
    <div class="container">
        <div class="top">
            <div class="title h3">运维点配置管理</div>
        </div>
        <div class="bottom">
            <div class="bottom_left">
                <scroll class="scroll">
                    <div>
                        <a-tree v-if="dataLoading" :defaultExpandAll="true" :replaceFields="replaceFields" :treeData="dataList" :show-line="showLine" :show-icon="showIcon">
                            <template slot="custom" slot-scope="item">
                                <div @click="onSelect(item)" class="hidden1" style="width: 100%;">{{ item.name }}</div>
                                <div class="tree-action">
                                    <template v-if="item.level != 3">
                                        <a-icon title="添加组织架构" type="plus" @click="(e)=> add(item)" />
                                    </template>
                                    <template v-if="item.level!=0">
                                        <a-icon title="修改组织架构" type="edit" @click="(e)=> edit(item)" />
                                    </template>
<!--                                    <template v-if="item.level == 3">-->
<!--                                        <a-icon title="企业修改" type="team" @click="(e)=> company(item)" />-->
<!--                                    </template>-->
                                    <template v-if="item.level!=0">
                                        <a-icon title="删除组织架构" type="delete" @click="(e)=> remove(item)" />
                                    </template>
                                </div>
                            </template>

                        </a-tree>
                    </div>
                </scroll>

            </div>
            <div class="bottom_right">
                <div class="add-right">
                    <a-button type="primary" @click="addUser">新增用户</a-button>
                </div>

                <div class="exception-content">
                    <my-table :data-source="tableData" rowKey="id" :pagination="false">
                        <a-table-column title="序号" :customRender="(text, record, index) =>(page.current - 1) * page.size + index + 1" align="center" width="100px"/>
                        <a-table-column title="姓名" data-index="nickname" align="center" :ellipsis="true" width="100px" />
                        <a-table-column title="账号" data-index="username" align="center" :ellipsis="true" />
                        <a-table-column title="职位" data-index="position" align="center" :ellipsis="true" />
                        <a-table-column title="绑定角色" align="center" width="120px">
                            <template slot-scope="text,record">
                                <div @click="roleOn(record)" class="rolcordclass">修改角色绑定</div>
                            </template>
                        </a-table-column>
                        <a-table-column title="操作" align="center">
                          <template slot-scope="text,record">
                            <div class="action-box">
                              <span @click="editEquipment(record)" class="rolcordclass">设备绑定</span>
                              <span @click="editFn(record)" class="rolcordclass">修改</span>
                            </div>
                            <div class="action-box">
                              <span @click="editPassFn(record.id)" class="rolcordclass">修改密码</span>
                              <span @click="delFn(record.id)" class="rolcordclass">删除</span>
                            </div>
                          </template>
                        </a-table-column>
                    </my-table>
                </div>
                <div class="page-box">
                    <a-pagination :show-total="total => `共 ${total} 条记录`" v-model="page.current" :total="total" :defaultPageSize="page.size" :item-render="itemRender" @change="pagechangeFn" />
                </div>
            </div>
        </div>
        <!-- 经纬度弹窗 -->
        <a-modal class="mapMapBox" :visible="mapModel" @cancel="onCloseIconFn()" width="86%" title="经纬度" centered :maskClosable="false" destroyOnClose>
            <div class="modal-content">
                <a-form-model layout="inline" :colon="false">
                    <a-form-model-item label="行政区域">
                        <a-cascader style="width:300px" :options="options" placeholder="请选择区域" :load-data="loadData" change-on-select @change="onChange" :field-names="{ label: 'name', value: 'adcode',children: 'children'}" />
                    </a-form-model-item>
                    <a-form-model-item>
                        <a-button type="primary" @click="AddRegion">添加</a-button>
                    </a-form-model-item>
                </a-form-model>
                <div class="map-bottom">
                    <div class="tableBox">
                        <my-table :data-source="MapTableData" rowKey="areaCode" :pagination="false" :customRow="rowclickFn" :scroll="{y: 500 }">
                            <a-table-column title="序号" align="center" :ellipsis="true" :customRender="(text, record, index) =>index + 1" width="100px"/>
                            <a-table-column title="名称" data-index="name" align="center" :ellipsis="true" />
                            <a-table-column title="操作" align="center">
                                <template slot-scope="text,record,index">
                                    <div class="handle">
                                        <a-button type="danger" @click="DelRegion(index)">删除</a-button>
                                    </div>
                                </template>
                            </a-table-column>
                        </my-table>
                    </div>
                    <div class="mapbox">
                        <el-amap :amap-manager="amapManager" :events="events" :center="center" :zoom="zoom" :vid="'amap-vue'"></el-amap>
                    </div>
                </div>

            </div>
            <template slot="footer">
                <a-button type="primary" @click="onMapModel">确定</a-button>
            </template>
        </a-modal>
        <!-- 添加区域 -->
        <a-modal v-model="formModel" width="60%" :title="formTitle" centered @cancel="()=>{formArea = {};MapTableData = [];}" :maskClosable="false" destroyOnClose>
            <a-form-model :model="formArea" :label-col="labelCol" :wrapper-col="wrapperCol" :colon="false">
                <a-form-model-item label="上级组织">
                    <a-tree-select v-model="formArea.parentId" :treeData="treeList" :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }" :replaceFields="{title:'name',key:'id',value:'id',children: 'menuList'}" placeholder="请选择上级组织" tree-default-expand-all>
                    </a-tree-select>
                </a-form-model-item>
                <a-form-model-item label="区域名称">
                    <a-input v-model="formArea.name" />
                </a-form-model-item>
                <a-form-model-item label="上下班时间">
                    <a-time-picker :default-value="morningTime" format="HH:mm" :disabled="isTimePicker" />
                    <span style="margin-left: 10px;margin-right: 10px;color: #fff">-</span>
                    <a-time-picker :default-value="nightTime" format="HH:mm" :disabled="isTimePicker" />
                </a-form-model-item>
                <a-form-model-item label="区域坐标">
                    <a-input v-model="formArea.geom" @focus="multiPolygon" />
                </a-form-model-item>
            </a-form-model>
            <template slot="footer">
                <a-button type="primary" @click="SubmitAdd">确定</a-button>
            </template>
        </a-modal>

        <!-- ？？？？？？？ -->
        <a-modal v-model="formModelCompany" width="60%" title="选择绑定企业" centered @cancel="()=>selectCompany = []" :maskClosable="false" destroyOnClose>
            <a-form-model :model="selectCompany" :label-col="labelCol" :wrapper-col="wrapperCol" :colon="false">
                <a-form-model-item label="选择企业">
                    <a-select mode="multiple" :default-value="selectCompany" style="width: 100%" placeholder="请选择企业" @change="handleChange">
                        <a-select-option v-for="item in companyList" :key="item.id">
                            {{item.name}}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
            </a-form-model>
            <template slot="footer">
                <a-button type="primary" @click="onSendEnterprise">确定</a-button>
            </template>
        </a-modal>
        <!-- 修改角色绑定-->
        <role-pop ref="rolePop"></role-pop>
        <!-- 修改人员基础信息以及添加人员弹窗 -->
        <user-pop ref="userPop" :title="title" :deptId="deptId" @heavyLoad="getUserDataList"></user-pop>
        <!--修改设备绑定-->
        <equipment-pop ref="equipmentPop" :equipmentPopData="equipmentPopData"></equipment-pop>
        <!-- 修改密码-->
      <edit-password ref="editPass" :roleId="roleId"></edit-password>
    </div>
</template>

<script>
import { AMapManager, lazyAMapApiLoaderInstance } from "vue-amap";
import moment from "moment";
import RolePop from "@/views/management/components/RolePop";
import UserPop from "@/views/management/components/UserPop";
import EquipmentPop from "@/views/management/components/EquipmentPop";
import EditPassword from "@/components/EditPassword";

let amapManager = new AMapManager();
export default {
    name: "operation",
    components:{
      RolePop,
      UserPop,
      EquipmentPop,
      EditPassword
    },
    data() {
        let _that = this;
        return {
          roleId:"",
            options: [],
            polygons: [],
            district: "",
            MapTableData: [],
            RegionObj: {}, // 用户选中的行政区
            // <----------------------->
            isTimePicker: true,
            mapModel: false,
            formModelValue: "",
            dataLoading: false,
            formType: "add",
            formTitle: "",
            formModel: false,
            formArea: {
                name: "",
                geom: "",
                geomList: [],
                morningTime: "",
                nightTime: "",
                level: "",
                parentId: "",
            },
            morningTime: moment("08:30", "HH:mm"),
            nightTime: moment("17:30", "HH:mm"),
            formCompany: {},
            selectCompany: [],
            companyList: [],
            formModelCompany: false,
            showLine: true,
            showIcon: true,
            dataList: [],
            replaceFields: {
                children: "menuList",
                title: "name",
                key: "id",
            },
            page: {
                current: 1,
                size: 8,
                areaId: 0,
            },
            treeList: [],
            labelCol: { span: 4 },
            wrapperCol: { span: 16 },
            //地图
            amapManager,
            mapStyle: "amap://styles/39ba2088b6b8fc67184833f73cceab4d",
            zoom: 10,
            map: "",
            center: [118.4643, 32.0238],
            events: {
                init(o) {
                    lazyAMapApiLoaderInstance.load().then(() => {
                        _that.initPage();
                    });
                },
            },
            mouseTool: [],
            geom: [],
            path: [],
            polylineEditor: [],
            tableData: [],
            total: 0,
            selectCompanyId: 0,
            selectArea: [],
            title:"", // 人员弹窗标题
            deptId:"",  // 运维id
            level:"",
          equipmentPopData:{}
        };
    },
    methods: {
      // 修改密码
      editPassFn(id){
        this.roleId = id;
        this.$refs.editPass.cipher = true;
      },
        // 点击表格行
        rowclickFn(record) {
            let then = this;
            return {
                on: {
                    click() {
                        if (record.areaCode) {
                            then.district.setExtensions("all");
                            then.district.search(
                                record.areaCode,
                                (status, result) => {
                                    then.drawGraphics(
                                        result.districtList[0].boundaries
                                    );
                                }
                            );
                        }
                    },
                },
            };
        },
        // 地图添加
        AddRegion() {
            if (Object.keys(this.RegionObj).length <= 0) {
                this.$message.info("请先选择行政区！");
                return;
            }
            if (
                this.MapTableData.some(
                    (v) => v.areaCode == this.RegionObj.areaCode
                )
            ) {
                this.$message.info("当前行政区域已选择！");
            } else {
                this.MapTableData.push(this.RegionObj);
            }
        },
        // 地图表格删除
        DelRegion(index) {
            this.MapTableData.splice(index, 1);
        },
        // 地图级联选择器
        onChange(value, selectedOptions) {
            if (!selectedOptions) {
                this.RegionObj = {};
                return;
            }
            const targetOption = selectedOptions[selectedOptions.length - 1];
            if (targetOption.level == "district") {
                this.district.setSubdistrict(0);
            } else {
                this.district.setSubdistrict(1);
            }
            targetOption.loading = true;
            this.district.setExtensions("all");
            this.district.search(targetOption.adcode, (status, result) => {
                if (status == "complete") {
                    targetOption.loading = false;
                    var bounds = result.districtList[0].boundaries;
                    if (bounds) {
                        this.drawGraphics(bounds);
                    }
                    if (targetOption) {
                        this.RegionObj = {
                            name: targetOption.name,
                            areaCode: targetOption.adcode,
                        };
                    }
                    // this.getDistrict(, targetOption);
                    if (
                        result.districtList[0].level == "province" &&
                        result.districtList[0].districtList
                    ) {
                        result.districtList[0].districtList.forEach((v) => {
                            v.isLeaf = false;
                        });
                    }
                    targetOption.children = result.districtList[0].districtList;
                    this.options = [...this.options];
                }
            });
        },
        loadData() {
            // 勿删
        },
        //初始化地图
        initPage() {
            let that = this;
            this.map = this.amapManager.getMap();
            this.map.plugin(["AMap.MouseTool", "AMap.DistrictSearch"], () => {
                this.mouseTool = new AMap.MouseTool(this.map);
                var opts = {
                    subdistrict: 1, //返回下一级行政区
                    showbiz: false, //最后一级返回街道信息
                };
                this.district = new AMap.DistrictSearch(opts);
                this.district.search("中国", (status, result) => {
                    if (status == "complete") {
                        var districtListData =
                            result.districtList[0].districtList;
                        districtListData.forEach((v) => {
                            v.isLeaf = false;
                        });
                        this.options = districtListData;
                        this.getDistrict(result.districtList[0]);
                    }
                });
            });
        },
        // 绘制图形
        drawGraphics(bounds) {
            this.map.clearMap();
            for (var i = 0, l = bounds.length; i < l; i++) {
                var polygon = new AMap.Polygon({
                    map: this.map,
                    strokeWeight: 1,
                    strokeColor: "rgba(128,216,255,0.73)",
                    fillColor: "rgba(0,176,255,0.75)",
                    // fillOpacity: 0.2,
                    path: bounds[i],
                });
                this.polygons.push(polygon);
            }
            this.map.setFitView(); //地图自适应
        },
        // 地图方法
        getDistrict(data, targetOption) {
            var bounds = data.boundaries;
            if (targetOption) {
                this.RegionObj = {
                    name: targetOption.name,
                    areaCode: targetOption.adcode,
                    bounds: bounds,
                };
            }
        },
        //树状图
        onSelect(item) {
        console.log(item)
            this.page.current = 1;
            this.page.areaId = item.id;
            this.deptId = item.id;
            this.level = item.level;
            this.getUserDataList();
        },

        add(item) {
            this.formTitle = "新增";
            this.formType = "add";
            let level = item.level + 1;
            if (level >= 4) {
                level = 4;
            }
            let morningTime = "",
                nightTime = "";
            if (item.morningTime) {
                morningTime = item.morningTime;
            }
            if (item.nightTime) {
                nightTime = item.nightTime;
            }
            if (level === 2) {
                this.isTimePicker = false;
            } else {
                this.isTimePicker = true;
            }
            this.formArea = {
                geom: "",
                name: "",
                geomList: [],
                level: level,
                parentId: item.id,
                morningTime: morningTime,
                nightTime: nightTime,
            };
            this.formModel = true;
        },
        edit(item) {
            this.formTitle = "编辑";
            this.formType = "edit";
            let level = item.level;
            let morningTime = "",
                nightTime = "";
            if (item.morningTime) {
                morningTime = item.morningTime;
            }
            if (item.nightTime) {
                nightTime = item.nightTime;
            }
            if (level === 2) {
                this.isTimePicker = false;
            } else {
                this.isTimePicker = true;
            }
            let str = "";
            item.geomList.forEach((v) => {
                str += v.name + " ";
            });
            this.formArea = {
                id: item.id,
                geom: str,
                geomList: item.geomList,
                name: item.name,
                level: level,
                parentId: item.parentId,
                morningTime: morningTime,
                nightTime: nightTime,
            };
            this.formModel = true;
        },
        // company(item) {
        //     this.selectCompany = [];
        //     this.selectCompanyId = item.id;
        //     this.$api.getCompanyList(item.id).then((res) => {
        //         if (res.data.code == 0) {
        //             if (res.data.data && res.data.data.length > 0) {
        //                 res.data.data.forEach((item) => {
        //                     this.selectCompany.push(item.id);
        //                 });
        //             }
        //         } else {
        //             this.$message.info(res.data.errorMessage);
        //         }
        //     });
        //     this.formModelCompany = true;
        // },

        onSendEnterprise() {
            let data = [];
            if (this.formCompany.length == 0) {
                this.$message.info("请选择企业!");
                return false;
            }
            this.formCompany.forEach((res, index) => {
                data.push({
                    companyId: res,
                });
            });
            this.$api
                .setPointBindCompany(this.selectCompanyId, data)
                .then((res) => {
                    if (res.data.data == true) {
                        this.$message.info("添加成功!");
                        this.formModelCompany = false;
                        this.selectCompany = [];
                        this.selectCompanyId = 0;
                    } else {
                        this.$message.info(res.data.errorMessage);
                    }
                });
        },
        remove(item) {
            let that = this;
            this.$confirm({
                title: "是否确认删除",
                onOk() {
                    that.$api.delArea(item.id).then((res) => {
                        if (res.data.data == true) {
                            that.$message.info("删除成功!");
                            that.getAreaData();
                        } else {
                            that.$message.info(res.data.errorMessage);
                        }
                    });
                },
                onCancel() {
                    return;
                },
                class: "delk",
            });
        },
        SubmitAdd() {
            if (this.formType == "add") {
                this.formArea.morningTime = this.morningTime.format("HH:mm");
                this.formArea.nightTime = this.nightTime.format("HH:mm");
                this.$api.addArea(this.formArea).then((res) => {
                    if (res.data.code == 0) {
                        this.$message.info("添加成功!");
                        this.MapTableData = [];
                        this.formModel = false;
                        this.formArea = {};
                        this.getAreaData();
                    } else {
                        this.$message.warning(res.data.errorMessage);
                    }
                });
            }
            if (this.formType == "edit") {
                this.formArea.morningTime = this.morningTime.format("HH:mm");
                this.formArea.nightTime = this.nightTime.format("HH:mm");
                this.$api.editArea(this.formArea).then((res) => {
                    if (res.data.code == 0) {
                        this.$message.info("修改成功!");
                        this.MapTableData = [];
                        this.formModel = false;
                        this.formArea = {};
                        this.getAreaData();
                    } else {
                        this.$message.warning(res.data.errorMessage);
                    }
                });
            }
        },

        createIterator(items) {
            items.forEach((res) => {
                res.scopedSlots = { title: "custom" };
                if (res.menuList && res.menuList.length > 0) {
                    return this.createIterator(res.menuList);
                }
            });
            return items;
        },
        getAreaData() {
            this.$api.getAllAreasList().then((res) => {
                if (res.data.code == 0) {
                    let data = res.data.data;
                    let _list = this.createIterator(data);
                    this.treeList = _list;
                    this.dataLoading = true;
                    this.dataList = _list;
                } else {
                    this.$message.info(res.data.errorMessage);
                }
            });
        },
        onMapModel() {
            this.mapModel = false;
            let str = "";
            this.MapTableData.forEach((v) => {
                str += v.name + " ";
            });
            this.formArea.geom = str;
            this.formArea.geomList = this.MapTableData;
            this.MapTableData = [];
        },
        // 点击右上角关闭按钮方法
        onCloseIconFn() {
            var self = this;
            this.$confirm({
                title: "是否确认关闭弹窗？",
                centered: true,
                onOk() {
                    self.mapModel = false;
                    self.MapTableData = [];
                    // self.map.clearMap();
                },
                onCancel() {
                    return;
                },
            });
        },

        multiPolygon(e) {
            e.target.blur();
            this.MapTableData = this.formArea.geomList;
            this.mapModel = true;
        },
        // disposeLocation(data) {
        //     if (data == null) {
        //         return [];
        //     }
        //     let arr = [];
        //     try {
        //         data = data.replace("MULTIPOLYGON(((", "((");
        //         data = data.replace("POLYGON(((", "((");
        //         data = data.replace(")))", "))");
        //         let reg = /\(\((.*?[^\)])\)\)/g;
        //         let _location = data.match(reg);
        //         _location.forEach((item) => {
        //             item = item.replace("((", "");
        //             item = item.replace("))", "");
        //             let path = [];
        //             let _item = item.split(",");
        //             _item.forEach((_list) => {
        //                 let temp = _list.split(" ");
        //                 //var gps = Hzyl.wgstogcj02(parseFloat(temp[1]), parseFloat(temp[0]));
        //                 path.push([parseFloat(temp[0]), parseFloat(temp[1])]);
        //             });
        //             arr.push(path);
        //         });
        //     } catch (err) {
        //         console.log(err);
        //     }
        //     return arr;
        // },
        // 角色
        roleOn(row){
          console.log(row);
          this.$refs.rolePop.roleModel = true;
          this.$refs.rolePop.userId = row.id;
          this.$refs.rolePop.getData();
        },
        // 人员
        //获取人员
        getUserDataList() {
            this.$api.getUserArea(this.page).then((res) => {
                if (res.data.code == 0) {
                    this.tableData = res.data.data;
                    this.total = res.data.total;
                }
            });
        },
        // 新增人员
        addUser(){
            if (!this.deptId||this.deptId == ""){
                this.$message.info("请先选择运维点");
                return;
            }
          this.$refs.userPop.form.level = this.level;
            this.$refs.userPop.form.deptId = this.deptId;
              this.title = "新增用户";
              this.$refs.userPop.getTreeData();
              this.$refs.userPop.addPop = true;
        },
        // 修改人员
        editFn(data) {
            data.sex = data.sex?1:0;
            let obj = JSON.parse(JSON.stringify(data));
            obj.positionObj = {key:obj.positionId,label:obj.position}
            obj.entryTime = moment(parseInt(obj.entryTime))
            console.log(obj,data)
            this.$refs.userPop.form = obj;
            this.title = "修改人员详细信息";
            this.$refs.userPop.getTreeData();
            this.$refs.userPop.addPop = true;
        },
        // 删除人员
        delFn(id) {
            let _that = this;
            this.$confirm({
                title: "是否确认删除？",
                onOk() {
                    _that.$api.delUser(id).then((res) => {
                        if (res.data.data == true) {
                            _that.$message.info("数据删除成功!");
                            _that.getUserDataList();
                        } else {
                            _that.$message.info(res.data.errorMessage);
                        }
                    });
                },
                onCancel() {
                    console.log("Cancel");
                },
                class: "delk",
            });
        },
        // 修改人员绑定的设备
        editEquipment(row){
            console.log(row)
            this.equipmentPopData = {userId:row.id,areaId:this.deptId,level:this.level};
            console.log(this.equipmentPopData)
            this.$refs.equipmentPop.equipmentPop = true;
            this.$nextTick(()=>{
              this.$refs.equipmentPop.init()
            })

        },
        // 分页方法
        itemRender(current, type, originalElement) {
            if (type === "prev") {
                return <a> 上一页 </a>;
            } else if (type === "next") {
                return <a> 下一页 </a>;
            }
            return originalElement;
        },
        pagechangeFn(page) {
            this.page.current = page;
            this.getUserDataList();
        },

        getCompanyDataList() {
            this.$api
                .postCompanyFindByPage({ current: 1, size: 1000000 })
                .then((res) => {
                    if (res.data.code == 0) {
                        res.data.data.forEach((item) => {
                            this.companyList.push({
                                name: item.companyName,
                                id: item.id,
                            });
                        });
                    }
                });
        },
        handleChange(value) {
            this.formCompany = value;
        },
        // 删除点标记按钮
        // cloDowr() {
        //     this.mouseTool.close(true);
        //     this.map.clearMap();
        //     this.geom = [];
        // },
        // dowrGraphics() {
        //     this.mouseTool.polygon();
        // },
    },
    mounted() {
        this.getCompanyDataList();
        this.getAreaData();
    },
};
</script>

<style lang="scss" scoped>
.scroll {
    height: 100%;
    overflow: hidden;
}
// 地图
::v-deep .ant-modal-body {
    padding: 0 24px;
    .modal-content {
        height: 600px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .map-bottom {
            width: 100%;
            height: 90%;
            display: flex;
            .mapbox {
                width: 60%;
                height: 100%;
            }
            .tableBox {
                width: 40%;
                height: 100%;
                box-sizing: border-box;
                padding-right: 20px;
            }
        }
    }
}

.container {
    width: 100%;
    height: 100%;
    padding-right: 1%;
    box-sizing: border-box;
    .top {
        padding-left: 30px;
        width: 100%;
        line-height: 50px;
        border-bottom: 1px solid #258cd7;
        box-sizing: border-box;
        display: flex;
        align-items: center;

        .title {
            font-size: 20px;
        }
    }

    .bottom {
        height: calc(100% - 50px);
        display: flex;
        .bottom_left {
            width: 30%;
            height: 100%;
            padding: 1% 0;
            box-sizing: border-box;
            border-right: 1px solid #258cd7;
            .btn-list {
                width: 100%;
                display: flex;
                justify-content: center;
                position: absolute;
                left: 0;
                bottom: 20px;

                div {
                    margin: 0 10px;
                }
            }
        }

        .bottom_right {
            width: 70%;
            height: 100%;
            padding: 20px;
            .add-right{
                height: 6%;
                text-align: right;
            }
            .exception-content{
                height: 90%;
                .rolcordclass{
                    color: #268cd7;
                    cursor:pointer;
                }
                .action-box{
                    display: flex;
                    justify-content: space-around;
                }
            }
            .page-box{
                float:right;
            }
            .map {
                width: 60%;
                height: 100%;
                border: 1px solid #37ddc0;
            }

            .datail {
                width: 38%;
                height: 100%;
                padding-top: 15px;
                position: relative;

                span {
                    color: #37ddc0;
                    font-size: 20px;
                }

                ul {
                    li {
                        margin: 20px 0;

                        div {
                            color: #9fb145;
                        }

                        color: rgb(204, 201, 201);
                    }
                }

                .btnrlist {
                    display: flex;
                    position: absolute;
                    bottom: 0;
                    right: 0;

                    div {
                        margin-left: 15px;
                    }
                }
            }
        }
    }
}

//按钮
.btn {
    display: flex;
    justify-content: center;
    width: 100px;
    padding: 5px 10px;
    border-radius: 5px;
    color: black;
}

.add {
    background: #2c6a5f;
}

.edit {
    background: #2e5882;
}

.del {
    background: #954a45;
}

::v-deep.ant-tree.ant-tree-show-line li span.ant-tree-switcher {
    background: transparent;
}

::v-deep .ant-tree li .ant-tree-node-content-wrapper {
    font-size: 16px;
}

.ant-input[disabled] {
    background-color: #2c4945;
    cursor: not-allowed;
    opacity: 1;
    color: #37ddc0;
}

.ant-tree ::v-deep li {
    position: relative;
}

::v-deep .tree-action {
    position: absolute;
    top: 5px;
    right: 10px;
}

::v-deep .tree-action i {
    margin-left: 10px;
    color: #268cd7;
}

/*.mapMapBox ::v-deep .ant-modal-centered{*/
/*    z-index: 99999999;*/
/*}*/
</style>
